<template>

  <div style="display: flex;align-items: center; height: 100vh; width: 100vw; position: absolute; top: 0; left: 0; background-color: #081426;" class="background">
    <div style="width: 25vw; height: 30vw; display: flex; flex-direction: column;align-items: center; background-color: transparent; border: none;margin-left: 6vw">
      <dv-border-box8>
        <el-card style="width: 25vw; height: 30vw; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: rgba(25, 36, 52, 1); border: none; ">
          <div style="height: 5vw;">
            <p style="color: whitesmoke; font-weight: bold; font-size: 2vw; text-align: center">用户登录</p>
          </div>
          <div style="height: 20vw">
            <el-input
                class="input"
                v-model="userName"
                style="width: 100%; height: 2.5vw; font-size: 1.2vw; margin-top: 1vw;"
                placeholder="请输入用户名"
                clearable
            />
            <el-input
                class="input"
                v-model="password"
                style="width: 100%; height: 2.5vw; font-size: 1.2vw; margin-top: 1vw"
                placeholder="请输入密码"
                type="password"
                clearable
            />
          </div>
          <div style="height: 9vw; display: flex; justify-content: center; margin-top: -10vw;">
            <button class="btn68" style="color: white; font-size: 0.8vw; height: 2.5vw" @click="login()">登录</button>
          </div>
        </el-card>
      </dv-border-box8>
    </div>

  </div>
</template>

<script setup lang="ts">
import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3'
import { inject, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus'
const userName = ref('')
const password = ref('')
const $http = inject("$axios")
const router = useRouter()
const error_msg = (msg) => {
  ElMessage({
    message: msg,
    type: 'error',
  })
}
function jumpToHome() {
  router.push("/home")
}

async function login() {
  // 检查用户名和密码是否为空
  if (!userName.value || !password.value) {
    error_msg("用户名和密码不能为空")
    return
  }

  const data = {
    userName: userName.value,
    password: password.value,
  }

  try {
    const res = await $http.post("http://localhost:8080/user/login", data)
    if (res.data) {
      jumpToHome()
    } else {
      error_msg("账号或密码错误")
    }
  } catch (err) {
    console.error(err)
    error_msg("登录失败，请稍后再试")
  }
}
</script>

<style scoped>
.background {
  background-image: url("../static/img/background/background.jpg");
  background-size: cover; /* 确保图片覆盖整个元素 */
  background-position: center; /* 图片居中显示 */
}
.btn68{
  width: 120px; /* 保持宽度不变 */
  height: 50px; /* 保持高度不变 */
  background-color: #1061bc;
  color: #081426;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 2px;
  border: none;
  border-radius: 8px; /* 修改为方形圆角 */
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .1s linear;
}
.btn68:before,.btn68:after{
  content: '';
  width: 120px;
  height: 50px;
  border-radius: 8px; /* 修改为方形圆角 */
  position: absolute;
  animation: eff68 1.4s linear infinite;
}
.btn68:after{
  animation-delay: 0.7s;
}
@keyframes eff68{
  0%{
    box-shadow: 0 0 0 0px white;
    opacity: 0.2;
  }
  100%{
    box-shadow: 0 0 0 30px whitesmoke;
    opacity: 0;
  }
}
.btn68:active{
  transform: scale(0.96);
}
</style>